<template>
  <basic-container >
    <avue-form
        ref="excelForm"
        v-model="excelForm"
        :option="excelOption"
      >
      <template slot-scope="{}" slot="serviceNo">
          <select-page
            ref="searchServiceNoSelect"
            label="serviceName"
            value="serviceNo"
            :select.sync="excelForm.serviceNo"
            :url="website.searchLink.serviceUrl"
            placeholder-text="服务商"
            filter-key="searchParam"
            @update:select="seriviceNoChange"  @clear:select="seriviceNoClear"
          ></select-page>
      </template>
      <template slot-scope="{}" slot="accountManager">
        <select-page
          ref="accountManagerSelect"
          label="accountManagerName"
          value="accountManager"
          :select.sync="excelForm.accountManager"
          :url="website.searchLink.accountManager"
          placeholder-text="客户经理"
          filter-key="searchParam"
        ></select-page>
      </template>
      <template slot-scope="{}" slot="groupRpiNo">
        <select-page
          ref="groupRpiNoSelect"
          label="rpiName"
          value="rpiNo"
          :select.sync="excelForm.groupRpiNo"
          :url="website.searchLink.groupUrl"
          placeholder-text="集团商户"
          filter-key="searchParam"
          @update:select="groupRpiNoChange"  @clear:select="groupRpiNoClear"
        ></select-page>
      </template>
      <template slot-scope="{}" slot="rpiNo">
        <select-page
          ref="searchRpiSelect"
          label="rpiName"
          value="rpiNo"
          :select.sync="excelForm.rpiNo"
          :url="website.searchLink.merchantUrl"
          placeholder-text="商户"
          filter-key="searchParam"
          @update:select="searchrpiNoChange"  @clear:select="searchrpiNoClear"
        ></select-page>
      </template>
      <template slot-scope="{}" slot="rpsNo">
        <select-page
          ref="searchrpsSelect"
          label="rpsName"
          value="rpsNo"
          :select.sync="excelForm.rpsNo"
          :url="website.searchLink.rpsUrl"
          placeholder-text="门店"
          filter-key="searchParam"
          @update:select="searchrpsNoChange" @clear:select="searchrpsNoClear"
        ></select-page>
      </template>
      <template slot-scope="{}" slot="rpstNo">
        <select-page
          ref="searchrpstSelect"
          label="rpstName"
          value="rpstNo"
          :select.sync="excelForm.rpstNo"
          :url="website.searchLink.rpstUrl"
          placeholder-text="操作员"
          filter-key="searchParam"
        ></select-page>
      </template>

      <template slot="menuForm">
        <div class="alertWrap">
          <div>1.开始日期与结束日期最大间隔 31 天</div>
          <div>2.开始日期与结束日期不能跨年</div>
        </div>
        <div class="btnWrap">
          <el-button icon="el-icon-download" type="primary" @click="handleSubmit" v-if="permissionList.exportBtn">立即下载</el-button>
        </div>
      </template>
      </avue-form>
  </basic-container>
</template>

<script>
import { getExport } from "@/api/rb-service/dealManagement/dealManagement";
import { mapGetters } from "vuex";
import selectPage from "@/components/select-page/select-page";

export default {
  components: {
    selectPage
  },
  data() {
    var validateTimeData = (rule, value, callback)=>{
      if(value.length){
        if( new Date(value[0]).getFullYear() === new Date(value[1]).getFullYear()){
          if(((new Date(value[1]).getTime() - new Date(value[0]).getTime()) / (3600 * 1000 * 24)) > 31){
            this.excelForm.timeData=[];
            this.excelForm.beginTime = "";
            this.excelForm.endTime = "";
            callback(new Error('开始日期与结束日期最大间隔 31 天!'));
          }else {
            callback();
          }
        }else{
          callback(new Error('开始日期与结束日期不能跨年'));
        }
      }else{
        callback(new Error('请选择对账时间段，开始日期与结束日期最大间隔 31 天!'));
      }
    };
    return {
      excelForm: {},
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 160, //弹出表单的标题的统一宽度
        // menuPosition: 'left',
        span:11,
        labelWidth:120,
        column: [
          {
            label: '服务商',
            prop: 'serviceNo',
            type: 'select',
            rules: [
              {
                // required: true,
                message: '请选择服务商',
                trigger: 'change'
              }
            ],
            // span: 10,
            row:true,
          },
          {
            label: '客户经理',
            prop: 'accountManager',
            type: 'select',
            rules: [
              {
                // required: true,
                message: '请选择客户经理',
                trigger: 'change'
              }
            ],
            // span: 10,
            row:true
          },
          {
            label: '集团商户',
            prop: 'groupRpiNo',
            type: 'select',
            // dataType: "number",
            rules: [
              {
                // required: true,
                message: '请选择集团商户',
                trigger: 'change'
              }
            ],
            row:true,
          },
          {
            label: '商户',
            prop: 'rpiNo',
            type: 'select',
            row:true,
          },
          {
            label: '门店',
            prop: 'rpsNo',
            type: 'select',
            rules: [
              {
                // required: true,
                message: '请选择门店',
                trigger: 'blur'
              }
            ],
            // span: 10,
            row:true,
          },
          {
            label: '收银员',
            prop: 'rpstNo',
            type: 'select',
            rules: [
              {
                // required: true,
                message: '请选择收银员',
                trigger: 'blur'
              }
            ],
            // span: 10,
            row:true,
          },
          {
            label: '支付状态',
            prop: 'payStateList',
            type: 'checkbox',
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            all:true,
            dicUrl: `/api/blade-system/dict/dictionary?code=bill_statue`,
            dicFormatter:(data)=>{
              // data.data.unshift({dictValue: "全部",dictKey: ""});
              return data.data
            },
            span: 24,
            row:true,
          },
          {
            label: "支付方式",
            prop: "rpsCustTypeList",
            type: 'checkbox',
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            all:true,
            // dataType: "number",
            dicUrl: "/api/blade-system/dict/dictionary?code=rpt_pay_type",
            dicFormatter:(data)=>{
              // data.data.unshift({dictValue: "全部",dictKey: ""});
              return data.data
            },
            span: 24,
            row:true,
          },
          {
            label: "对账单日期",
            prop: "timeData",
            type: "daterange",
            searchRange: true,
            defaultTime:['00:00:00', '23:59:59'],
            format:'yyyy-MM-dd HH:mm:ss',
            valueFormat:'yyyy-MM-dd HH:mm:ss',
            startPlaceholder: "对账单开始时间",
            endPlaceholder: "对账单结束时间",
            search: true,
            rules: [
              {
                required: true,
                validator: validateTimeData,
                trigger: "change",
              },
            ],
            // span: 10,
            row:true
          }
        ],
      },
      rpiNoList:[],//商户列表
      groupRpiNoList:[],//集团商户列表
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        exportBtn: this.vaildData(this.permission.bill_export, false)
      };
    },
  },
  watch: {
    "excelForm.timeData"(val){
      if(val.length){
        this.excelForm.beginTime = val[0];
        this.excelForm.endTime = val[1];
      }else{
        this.excelForm.beginTime = "";
        this.excelForm.endTime = "";
      }
    }
  },
  // created(){
  //   this.ApiRpiNo({rpiKind:1})
  //   this.ApiRpiNo({rpiKind:0})
  // },
  methods: {
    /**@desc门店改变 */
    searchrpsNoChange(value){
      if (value) {
        this.excelForm.rpstNo = "";

        let params = {
          rpiNo:this.excelForm.rpiNo,
          rpsNo: value
        };
        this.$refs['searchrpstSelect'].getOptionList(params);
        this.$forceUpdate();
      }
    },
    /**@desc门店清空 */
    searchrpsNoClear(){
      this.excelForm.rpstNo = "";

      this.$refs['searchrpstSelect'].getOptionList();
      this.$forceUpdate();
    },
    /**@desc商户改变 */
    searchrpiNoChange(value){
      if (value) {
        this.excelForm.rpsNo = "";
        this.excelForm.rpstNo = "";

        let params = {
          rpiNo: value
        };
        this.$refs['searchrpsSelect'].getOptionList(params);
        this.$refs['searchrpstSelect'].getOptionList(params);
        this.$forceUpdate();
      }
    },
    /**@desc商户清空 */
    searchrpiNoClear(){
      this.excelForm.rpsNo = "";
      this.excelForm.rpstNo = "";

      this.$refs['searchrpsSelect'].getOptionList();
      this.$refs['searchrpstSelect'].getOptionList();
      this.$forceUpdate();
    },
    /**@desc集团商户改变 */
    groupRpiNoChange(value){
      if (value) {
        this.excelForm.rpiNo = "";
        this.excelForm.rpsNo = "";
        this.excelForm.rpstNo = "";

        let params = {
          rpiGroup: value
        };
        this.$refs['searchRpiSelect'].getOptionList(params);
        this.$refs['searchrpsSelect'].getOptionList(params);
        this.$refs['searchrpstSelect'].getOptionList(params);
        this.$forceUpdate();
      }
    },
    /**@desc集团商户清空 */
    groupRpiNoClear(){
      this.excelForm.rpiNo = "";
      this.excelForm.rpsNo = "";
      this.excelForm.rpstNo = "";

      this.$refs['searchRpiSelect'].getOptionList();
      this.$refs['searchrpsSelect'].getOptionList();
      this.$refs['searchrpstSelect'].getOptionList();
      this.$forceUpdate();
    },
    /**@desc服务商改变 */
    seriviceNoChange(value){
      if (value) {
        this.excelForm.accountManager = "";

        let params = {
          serviceNo: value
        };
        this.$refs['accountManagerSelect'].getOptionList(params);
        this.$forceUpdate();
      }
    },
    /**@desc服务商清空 */
    seriviceNoClear(){
      this.excelForm.accountManager = "";

      this.$refs['accountManagerSelect'].getOptionList();
      this.$forceUpdate();
    },
    // 获取商户
    // ApiRpiNo(param){
    //   if(param.rpiKind == 1){
    //     // 集团商户
    //     getRpiNo(param).then((res) => {
    //       this.groupRpiNoList = res.data.data.records;
    //       const column = this.findObject(this.excelOption.column, "groupRpiNo");
    //       column.dicData = this.groupRpiNoList;
    //     })
    //   }else{
    //     // 普通商户
    //     getRpiNo(param).then((res) => {
    //       this.rpiNoList = res.data.data.records;
    //       const column = this.findObject(this.excelOption.column, "rpiNo");
    //       column.dicData = this.rpiNoList;
    //     })
    //   }
    // },
    // 导出
    handleSubmit(){
      let _this = this;
      _this.$refs.excelForm.validate((vaild,done)=>{
        if(vaild){
          _this.$confirm("是否下载对账单数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          }).then(() => {
            // payStateListString
            // rpsCustTypeListString
            let {serviceNo,accountManager,rpiNo,rpsNo,rpstNo,beginTime,endTime,groupRpiNo} = _this.excelForm;
            let param = {serviceNo,accountManager,rpiNo,rpsNo,rpstNo,beginTime,endTime,groupRpiNo};
            if(_this.excelForm.payStateList.length){
              param.payStateListString= _this.excelForm.payStateList.join(",")
            }
            if(_this.excelForm.rpsCustTypeList.length){
              param.rpsCustTypeListString= _this.excelForm.rpsCustTypeList.join(",")
            }

            getExport(param).then((res) => {
                //downloadFileExcel(res);
                this.$message({
                  type: "success",
                  message: res.data.msg
                });
                done()
              },
              (error) => {
                window.console.log(error);
                done()
              }
            );
          }).catch(() => {
            done()
          })
        }
      })

    }
  }
};
</script>


<style lang="scss" scoped>
.avue-form{
  padding-left: 200px;
}

/deep/ .avue-checkbox{
  display: flex !important;
}
.btnWrap{
  width: 25%;
  display: flex ;
  justify-content: flex-end;
}
.alertWrap{
  padding-left: 120px;
  color: #E6A23C;
  display: flex ;
  flex-direction: column;
  align-items: flex-start;
}
</style>

